import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useSettingsStore } from '@/store';
import { useId } from 'react';

type Props = {
  children?: React.ReactNode;
  className?: string;
};

export default function AccountSetting({ children, className, ...props }: Props) {
  const accountSetting = useSettingsStore((state) => state.accountSetting);
  const dispatch = useSettingsStore((state) => state.dispatch);
  const id = useId();

  return (
    <div className={className} {...props}>
      <div className="border border-input rounded-lg py-3 pl-2 relative">
        <span className="absolute left-5 top-0 translate-y-[-50%] px-1 text-base bg-white">
          火山引擎
        </span>
        <div className="flex px-3 gap-2 items-center py-4 bd-bottom-gray">
          <Label className="whitespace-nowrap w-[80px]" htmlFor={id + '-volcengine-api-key'}>
            api key:
          </Label>
          <Input
            type="password"
            value={accountSetting.volcengine.apiKey}
            onChange={(event) => {
              dispatch({
                type: 'update',
                update(draftState) {
                  draftState.accountSetting.volcengine.apiKey = event.target.value;
                },
              });
            }}
            id={id + '-volcengine-api-key'}
            className="h-10 w-auto rounded-md border border-input px-3 py-2 mr-auto"
          />
        </div>
      </div>
      <div className="border border-input rounded-lg py-3 pl-2 relative">
        <span className="absolute left-5 top-0 translate-y-[-50%] px-1 text-base bg-white">
          GIGAB2B
        </span>
        <div className="flex px-3 gap-2 items-center py-4 bd-bottom-gray">
          <Label className="whitespace-nowrap w-[80px]" htmlFor={id + '-giga-client-id'}>
            client id:
          </Label>
          <Input
            value={accountSetting.giga.clientId}
            type="password"
            disabled
            onChange={(event) => {
              dispatch({
                type: 'update',
                update(draftState) {
                  draftState.accountSetting.giga.clientId = event.target.value;
                },
              });
            }}
            id={id + '-giga-client-id'}
            className="h-10 w-auto rounded-md border border-input px-3 py-2 mr-auto"
          />
        </div>
        <div className="flex px-3 gap-2 items-center py-4 bd-bottom-gray">
          <Label className="whitespace-nowrap w-[80px]" htmlFor={id + '-giga-client-secret'}>
            client secret:
          </Label>
          <Input
            type="password"
            disabled
            value={accountSetting.giga.clientSecret}
            onChange={(event) => {
              dispatch({
                type: 'update',
                update(draftState) {
                  draftState.accountSetting.giga.clientSecret = event.target.value;
                },
              });
            }}
            id={id + '-giga-client-secret'}
            className="h-10 w-auto rounded-md border border-input px-3 py-2 mr-auto"
          />
        </div>
      </div>
    </div>
  );
}
